<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>t龟兔赛跑</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        font-family: "华文楷体";
        position: relative;
    }

    #box1 {
        margin-top: 100px;
        border: black 1px solid;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 0;
    }

    #box2 {
        margin-top: 160px;
        border: black 1px solid;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 0;
    }

    #btn {
        position: absolute;
        left: 50px;
        top: 300px;
    }

    button {
        font-size: 20px;
        margin-left: 50px;
        width: 100px;
        height: 40px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        z-index: 1;
        text-align: center;
        line-height: 20px;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }

    #linear {
        width: 0;
        height: 400px;
        border-left: black 1px solid;
        position: absolute;
        top: 0;
        left: 700px;
    }

</style>
<body>
<div id="box">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="linear"></div>
    <div id="btn">
        <button id="btn1">b1-向右</button>
        <button id="btn2">b1-向左</button>
        <button id="btn3">b2-向右</button>
    </div>
</div>

<script>

    // 点击按钮的移动方向函数
    function move(obj, speed, num) {
        let box = document.getElementById(obj)
        // 每次点击按钮1时，都清除原来的计时器，防止计时器叠加
        clearInterval(box.time)
        // 定时器
        box.time = setInterval(function () {
            // 调用获取样式的函数
            let box1Left = getStyle(obj, "offsetLeft")
            let linearLeft = getStyle("linear", "offsetLeft")
            let box1Width = getStyle(obj, "offsetWidth")
            // 每次循环+speed
            let new_box1Left = box1Left + speed
            // 如果循环+了speed的值大于linearLeft-box1Width就把linearLeft-box1Width给box1
            if (speed > 0 && new_box1Left > linearLeft - box1Width) {
                new_box1Left = linearLeft - box1Width
            }
            // 判断是否出左边界
            if (speed < 0 && new_box1Left < num) {
                new_box1Left = num
            }
            box.style.left = new_box1Left + "px"
            // 如果box1右边框和linearLeft相等就清除计时器
            if (new_box1Left === linearLeft - box1Width) {
                speed = -speed
            }
        }, 200)
    }

    var btn1 = document.getElementById("btn1")
    var btn2 = document.getElementById("btn2")
    var btn3 = document.getElementById("btn3")

    btn1.addEventListener("click", function () {
        // move(div,speed,num)
        move("box1", 60, 0)
    })
    btn2.addEventListener("click", function () {
        // move(div,speed,num)
        move("box1", -60, 0)
    })
btn3.addEventListener("click", function () {
        // move(div,speed,num)
        move("box2", 40, 0)
    })


    // 获取样式的函数
    function getStyle(box, style) {
        let box1 = document.getElementById(box)
        return box1[style]
    }
</script>
</body>
</html>
